<script setup lang="ts">
import { computed, onMounted, ref } from 'vue'
import {
  windowSeparatorLineWidth,
  type WindowSeparatorLine,
} from './class/windowseparatorline'
import Draggable from 'gsap/Draggable'
import { getMoveArea } from './ts/windowmanager'

const props = defineProps<{
  data: WindowSeparatorLine
}>()

const style = computed(() => {
  const data = props.data
  const o = {
    width: '',
    height: '',
    top: data.top + 'px',
    left: data.left + 'px',
    cursor: '',
  }
  if (data.flow === 'Horizontal') {
    o.width = (data.right as number) - (data.left as number) + 'px'
    o.height = '2px'
    o.cursor = 'n-resize'
  } else {
    o.width = '2px'
    o.height = (data.bottom as number) - (data.top as number) + 'px'
    o.cursor = 'e-resize'
  }
  return o
})

const emit = defineEmits<{
  (
    e: 'onDrag',
    line: WindowSeparatorLine,
    offsetX: number,
    offsetY: number
  ): void
  (
    e: 'onRelease',
    line: WindowSeparatorLine,
    offsetX: number,
    offsetY: number
  ): void
}>()

const halfLineWidth = windowSeparatorLineWidth / 2

const $line = ref()
const active = ref(false) // 是否激活，用于控制分割线颜色
onMounted(() => {
  let x: number, y: number
  // const top = props.data.layout.top as number // 上边界
  // const bottom = props.data.layout.bottom as number // 下边界
  // const left = props.data.layout.left as number // 左边界
  // const right = props.data.layout.right as number // 右边界
  // let limitLeft: number
  // let limitRight: number
  // let limitTop: number
  // let limitBottom: number
  // if (props.data.index === 0) {
  //   // 如果是第一条分割线
  //   limitLeft = left + minWindowWidth + 1 // 分割线还要占据1像素
  //   limitTop = top + minWindowHeight + 1
  // } else {
  //   // 如果不是第一条分割线
  //   const percent = props.data.layout.separator[props.data.index - 1]
  //   limitLeft = percent * (right - left) + left + minWindowWidth + 2 // 首尾分割线共两条，占据2像素
  //   limitTop = percent * (bottom - top) + top + minWindowHeight + 2
  // }
  // if (props.data.index === props.data.layout.separator.length - 1) {
  //   // 如果是最后一条分割线
  //   limitRight = right - minWindowWidth - 1
  //   limitBottom = bottom - minWindowHeight - 1
  // } else {
  //   // 如果不是最后一条分割线
  //   const percent = props.data.layout.separator[props.data.index + 1]
  //   limitRight = percent * (right - left) + left - minWindowWidth - 2
  //   limitBottom = percent * (bottom - top) + top - minWindowHeight - 2
  // }
  const line = Draggable.create($line.value, {
    cursor: style.value.cursor,
    activeCursor: style.value.cursor,
    type: props.data.flow === 'Horizontal' ? 'y' : 'x',
    inertia: true,
    liveSnap: true,
    snap: {
      x: function (endValue: number) {
        if (props.data.flow === 'Horizontal') {
          // 横线
          return endValue
        } else {
          // 竖线
          const area = getMoveArea(props.data)
          const currX = props.data.left + halfLineWidth + endValue
          if (currX < area[0]) {
            // 超过左边限制
            return area[0] - (props.data.left + halfLineWidth)
          } else if (currX > area[1]) {
            // 超过右边限制
            return area[1] - (props.data.left + halfLineWidth)
          } else {
            return endValue
          }
        }
      },
      y: function (endValue: number) {
        if (props.data.flow === 'Horizontal') {
          // 横线
          const area = getMoveArea(props.data)
          const currY = props.data.top + halfLineWidth + endValue
          if (currY < area[0]) {
            // 超过上边限制
            return area[0] - (props.data.top + halfLineWidth)
          } else if (currY > area[1]) {
            // 超过下边限制
            return area[1] - (props.data.top + halfLineWidth)
          } else {
            return endValue
          }
        } else {
          // 竖线
          return endValue
        }
      },
    },
    onPress: function () {
      // 记录初始拖动位置
      x = line.x
      y = line.y
    },
    onDrag: function () {
      active.value = true
      emit('onDrag', props.data, line.x - x, line.y - y) // 分割线、水平拖动距离、垂直拖动距离
    },
    onRelease: function () {
      active.value = false
      emit('onRelease', props.data, line.x - x, line.y - y) // 分割线、水平拖动距离、垂直拖动距离
    },
  })[0]
})
</script>

<template>
  <div
    ref="$line"
    class="window-separator-line"
    :style="style"
    :class="{ active }"
  ></div>
</template>

<style scoped lang="less">
@activeColor: blue;
.window-separator-line {
  position: absolute;
  z-index: 2;
  &.active {
    background-color: @activeColor;
  }
  &:not(.disabled):hover {
    transition: 2s;
    background-color: @activeColor;
  }
}
</style>
